<template>
  <div ref="container">
    <a-modal
      :title="title"
      :width="width"
      :visible="visible"
      :getContainer="() => $refs.container"
      :maskStyle="{'top':'93px','left':'154px'}"
      :wrapClassName="wrapClassNameInfo()"
      :mask="isDesktop()"
      :maskClosable="false"
      :style="modalStyle"
      @cancel="handleCancel"
      cancelText="关闭">
      <template slot="footer">
        <a-button key="back" @click="handleCancel">取消</a-button>
        <a-button v-print="'#printViewInfo'" type="primary">打 印</a-button>
      </template>
      <a-form :form="form">
        <template>
          <!-- <iframe :src="billPrintUrl" width="100%" :height="height" frameborder="0" scrolling="no"></iframe> -->
          <div id="printViewInfo" style="color: #000!important;">
        <div style="page-break-after:always;">
          <!-- line-height: 80px; -->
          <h2 style="font-size: 18px;font-weight: bold;color: #000!important;text-align: center;margin: 0;padding: 20px 0 10px;">{{title}}</h2>
          <div style="padding-bottom: 7px;">
            <div style="display: inline-block;text-align: left;font-size: 14px;width: 33%;">
              日期：{{filtertime(model.operTimeStr)}}
            </div>
            <div style="display: inline-block;text-align: center;font-size: 14px;width: 33%;">
              客户：{{model.organName}}
            </div>
            <div style="display: inline-block;text-align: right;font-size: 14px;width: 33%;">
              编号：{{model.number}}
            </div>
          </div>
          <div style="padding-bottom: 7px;">
            <!-- <div style="display: inline-block;text-align: left;font-size: 18px;width: 33%;">
              购货单位：{{model.organName}}
            </div> -->
            <div style="display: inline-block;text-align: left;font-size: 14px;width: 33%;">
              联系电话：{{model.telephone}}
            </div>
            <!-- <div style="display: inline-block;text-align: right;font-size: 18px;width: 33%;">
              摘要：
            </div> -->
          </div>
          <div style="padding-top: 10px;color: #000!important;">
            <table
              border="1px solid #ccc"
              cellspacing="0"
              cellpadding="0"
              style="width: 100%;color: #000!important;border-color: #000;"
            >
              <thead>
                <tr>
                  <th style="padding: 4px;font-weight: normal;font-size: 14px;">
                    产品代码
                  </th>
                  <th style="padding: 4px;font-weight: normal;font-size: 14px;">
                    产品名称
                  </th>
                  <th style="padding: 4px;font-weight: normal;font-size: 14px;">
                    规格型号
                  </th>
                  <th style="padding: 4px;font-weight: normal;font-size: 14px;">
                    发货仓库
                  </th>
                  <th style="padding: 4px;font-weight: normal;font-size: 14px;">
                    单位
                  </th>
                  <th style="padding: 4px;font-weight: normal;font-size: 14px;">
                    数量
                  </th>
                  <th style="padding: 4px;font-weight: normal;font-size: 14px;">
                    单价
                  </th>
                  <th style="padding: 4px;font-weight: normal;font-size: 14px;">
                    金额
                  </th>
                  <th style="padding: 4px;font-weight: normal;font-size: 14px;">
                    备注
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item,i) in datasouce" :key="i">
                  <th style="padding: 4px;font-weight: normal;font-size: 14px;">
                    {{item.barCode}}
                  </th>
                  <th style="padding: 4px;font-weight: normal;font-size: 14px;">
                    {{item.name}}	
                  </th>
                  <th style="padding: 4px;font-weight: normal;font-size: 14px;">
                    {{item.standard}}/{{item.model}}	
                  </th>
                  <th style="padding: 4px;font-weight: normal;font-size: 14px;">
                    {{item.depotName}}		
                  </th>
                  <th style="padding: 4px;font-weight: normal;font-size: 14px;">
                    {{item.unit}}		
                  </th>
                  <th style="padding: 4px;font-weight: normal;font-size: 14px;">
                    {{item.operNumber}}
                  </th>
                  <th style="padding: 4px;font-weight: normal;font-size: 14px;">
                    {{item.unitPrice}}
                  </th>
                  <th style="padding: 4px;font-weight: normal;font-size: 14px;">
                    {{item.allPrice}}
                  </th>
                  <th style="padding: 4px;font-weight: normal;font-size: 14px;">
                    {{item.remark}}
                  </th>
                </tr>
                <tr>
                  <th style="padding: 4px;font-weight: normal;font-size: 14px;border: none;">
                    
                  </th>
                  <th style="padding: 4px;font-weight: normal;font-size: 14px;border: none;">
                    合计	
                  </th>
                  <th style="padding: 4px;font-weight: normal;font-size: 14px;border: none;">
                   
                  </th>
                  <th style="padding: 4px;font-weight: normal;font-size: 14px;border: none;">
                    
                  </th>
                  <th style="padding: 4px;font-weight: normal;font-size: 14px;border: none;">
                    
                  </th>
                  <th style="padding: 4px;font-weight: normal;font-size: 14px;border: none;">
                    {{datasouceall.operNumber}}
                  </th>
                  <th style="padding: 4px;font-weight: normal;font-size: 14px;border: none;">
                    
                  </th>
                  <th style="padding: 4px;font-weight: normal;font-size: 14px;;border: none;">
                    {{datasouceall.allPrice}}
                  </th>
                  <th style="padding: 4px;font-weight: normal;font-size: 14px;border: none;">
                    
                  </th>
                </tr>
              </tbody>
            </table>
          </div>
          <div style="padding-top: 20px;">
            <!-- <div
              style="display: inline-block;text-align: left;font-size: 18px;width: 33%;"
            >
              <span
                style="display: inline-block;vertical-align: top;width: 100px;"
              >
                申请人：
              </span>
              <span
                style="display: inline-block;vertical-align: top;width: calc(100% - 140px);border-bottom: 1px solid #333;height: 30px;"
              ></span>
            </div>
            <div
              style="display: inline-block;text-align: left;font-size: 18px;width: 33%;"
            >
              <span
                style="display: inline-block;vertical-align: top;width: 100px;"
              >
                审批人：
              </span>
              <span
                style="display: inline-block;vertical-align: top;width: calc(100% - 140px);border-bottom: 1px solid #333;height: 30px;"
              ></span>
            </div>
            <div
              style="display: inline-block;text-align: left;font-size: 18px;width: 33%;"
            >
              <span
                style="display: inline-block;vertical-align: top;width: 100px;"
              >
                采购员：
              </span>
              <span
                style="display: inline-block;vertical-align: top;width: calc(100% - 140px);border-bottom: 1px solid #333;height: 30px;"
              ></span>
            </div> -->
            <div>备注:客户签字表示购销双方权利义务已确认;此单一经签名，即视为结收据。</div>
            <div style="margin-top: 10px;">
              <div class="" style="float: left;">送货单位及经手人签字:</div>
              <div class="" style="float: right;margin-right: 300px;">收货单位及经手人签字:</div>
            </div>
          </div>
          <!-- <div class="hidden">打印区域不需要打印的内容</div> -->
        </div>
        <!-- <div style="page-break-after:always">
          <h2 style="font-size: 22px;font-weight: bold;text-align: center;margin: 0;line-height: 122px;">采购单2</h2>
          <div style="padding-bottom: 7px;">
            <div style="display: inline-block;text-align: left;font-size: 18px;width: 33%;">
              姓名：张三
            </div>
            <div style="display: inline-block;text-align: center;font-size: 18px;width: 33%;">
              部门：软件研发部
            </div>
            <div style="display: inline-block;text-align: right;font-size: 18px;width: 33%;">
              职务：前端开发工程师
            </div>
          </div> 
          <div style="padding-top: 10px;">
            <table
              border="1px solid #ccc"
              cellspacing="0"
              cellpadding="0"
              style="width: 100%;"
            >
              <thead>
                <tr>
                  <th style="padding: 4px;font-weight: normal;font-size: 18px;">
                    名称
                  </th>
                  <th style="padding: 4px;font-weight: normal;font-size: 18px;">
                    数量
                  </th>
                  <th style="padding: 4px;font-weight: normal;font-size: 18px;">
                    金额
                  </th>
                  <th style="padding: 4px;font-weight: normal;font-size: 18px;">
                    备注
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td style="padding: 4px;font-weight: normal;font-size: 18px;">
                    显示屏
                  </td>
                  <td style="padding: 4px;font-weight: normal;font-size: 18px;">
                    1台
                  </td>
                  <td style="padding: 4px;font-weight: normal;font-size: 18px;">
                    700
                  </td>
                  <td style="padding: 4px;font-weight: normal;font-size: 18px;">
                    下周一前需要使用
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div style="padding-top: 40px;">
            <div
              style="display: inline-block;text-align: left;font-size: 18px;width: 33%;"
            >
              <span
                style="display: inline-block;vertical-align: top;width: 100px;"
              >
                申请人：
              </span>
              <span
                style="display: inline-block;vertical-align: top;width: calc(100% - 140px);border-bottom: 1px solid #333;height: 30px;"
              ></span>
            </div>
            <div
              style="display: inline-block;text-align: left;font-size: 18px;width: 33%;"
            >
              <span
                style="display: inline-block;vertical-align: top;width: 100px;"
              >
                审批人：
              </span>
              <span
                style="display: inline-block;vertical-align: top;width: calc(100% - 140px);border-bottom: 1px solid #333;height: 30px;"
              ></span>
            </div>
            <div
              style="display: inline-block;text-align: left;font-size: 18px;width: 33%;"
            >
              <span
                style="display: inline-block;vertical-align: top;width: 100px;"
              >
                采购员：
              </span>
              <span
                style="display: inline-block;vertical-align: top;width: calc(100% - 140px);border-bottom: 1px solid #333;height: 30px;"
              ></span>
            </div>
          </div>
          <div class="hidden">打印区域不需要打印的内容</div>
        </div> -->
      </div>
      </template>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
  import pick from 'lodash.pick'
  import {mixinDevice} from '@/utils/mixin'
  import { getAction } from '@/api/manage'
  export default {
    name: 'BillPrintIframe',
    mixins: [mixinDevice],
    data () {
      return {
        title: "罗德面粉加工厂",
        width: '1000px',
        visible: false,
        modalStyle: '',
        billPrintUrl: '',
        height: "",
        model: {},
        datasouce: [],
        datasouceall: {},
        form: this.$form.createForm(this),
        loading: false,


        msg: "打印",
        printViewInfo: {
          id: "printView", //打印区域的唯一的id属性
          popTitle: '配置页眉标题', // 页眉文字 （不设置时显示undifined）（页眉页脚可以在打印页面的更多设置的选项中取消勾选）
          extraHead: '打印，印刷', // 最左上方的头部文字，附加在head标签上的额外标签，使用逗号分割
          preview: false, // 是否启动预览模式，默认是false （开启预览模式ture会占满整个屏幕，不建议开启，除非业务需要）
          previewTitle: '预览的标题', // 打印预览的标题(预览模式preview为true时才显示)
          previewPrintBtnLabel: '预览结束，开始打印', // 打印预览的标题下方的按钮文本，点击可进入打印(预览模式preview为true时才显示)
          zIndex: 20002, // 预览窗口的z-index，默认是20002，最好比默认值更高
          previewBeforeOpenCallback (that) { console.log('正在加载预览窗口！'); console.log(that.msg, this) }, // 预览窗口打开之前的callback (预览模式preview为true时才执行) （that可以取到data里的变量值）
          previewOpenCallback () { console.log('已经加载完预览窗口，预览打开了！') }, // 预览窗口打开时的callback (预览模式preview为true时才执行)
          beforeOpenCallback () { console.log('开始打印之前！') }, // 开始打印之前的callback
          openCallback () { console.log('执行打印了！') }, // 调用打印时的callback
          closeCallback () { console.log('关闭了打印工具！') }, // 关闭打印的callback(无法区分确认or取消)
          clickMounted () { console.log('点击v-print绑定的按钮了！') },
          // url: 'http://localhost:8080/', // 打印指定的URL，确保同源策略相同
          // asyncUrl (reslove) {
          //   setTimeout(() => {
          //     reslove('http://localhost:8080/')
          //   }, 2000)
          // },
          standard: '',
          extarCss: ''
        }
      }
    },
    created () {
      this.getname()
    },
    methods: {
      show(record, billPrintUrl, billPrintHeight,datasouce) {
        this.height = billPrintHeight
        this.billPrintUrl = billPrintUrl
        this.visible = true
        this.modalStyle = 'top:20px;height: 95%;'
        this.model = Object.assign({}, record)
        // this.datasouce = Object.assign({}, datasouce)
        console.log('datasouce:', datasouce);
        if(datasouce&&datasouce.length>0){
          this.datasouce = datasouce.slice(0,datasouce.length-1)
          this.datasouceall = datasouce[datasouce.length-1]
        }
        console.log('this.model:', this.model);
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model,'id'))
        });
      },
      handleCancel() {
        this.close()
      },
      close() {
        this.billPrintUrl = ''
        this.$emit('close')
        this.visible = false
        this.modalStyle = ''
      },
      print() {
        this.dialogVisible = true
      },
      filtertime(tm){
        if(tm){
          return tm.split(' ')[0]
        }
        return tm
      },
      getname(){
        getAction('/platformConfig/getPlatform/name').then((res) => {
            console.log('getPlatform:', res);
            this.title = res||'罗德面粉加工厂'
        })
      },
    }
  }
</script>

<style lang="less" scoped>
@media print {
  .hidden{
    display: none;
  }
}
::v-deep{
    .ant-modal-cust-warp .ant-modal-body{
      padding-top: 10px;
    }
}
</style>